<template>
  <view class="page">
    <view class="main padding--sm">
      <up-checkbox-group
        :borderBottom="true"
        shape="circle"
        activeColor="#A0CF38"
        size="26"
        v-model="checkboxValue1"
        placement="column"
        @change="checkboxChange"
      >
        <up-checkbox
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in list"
          :key="index"
          :name="item.name"
        >
          <template #label>
            <up-text
              size="16"
              :text="item.name"
              bold
              margin="0 0 0 4px"
            >
            </up-text>
            <up-text
              :text="item.desc"
              size="16"
              color="#B7B7B7"
              margin="6px 0 6px 4px"
              v-if="item.desc"
            ></up-text>
          </template>
        </up-checkbox>
      </up-checkbox-group>
    </view>
    <view class="footer">
      <up-button
        type="primary"
        size="large"
        margin="20px 0 0 0"
        @click="sharePost"
      >
        发布
      </up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { sharePostApi } from '@/api/community';
const list = reactive([
  {
    name: '公开',
    desc: '所有人可见',
    disabled: false
  },
  {
    name: '粉丝',
    desc: '关注你的人可见',
    disabled: false
  },
  {
    name: '好友圈',
    desc: '相互关注好友可见',
    disabled: false
  },
  {
    name: '仅自己可见',
    disabled: false
  }
]);

const sharePost = async () => {
  const result = await sharePostApi();
};
</script>

<style scoped lang="scss">
.page {
  background: #fffefa;
}
</style>
